<header class="site-header">

	<!-- Menu toggle -->
	<a href="#menu" id="menuLink" class="menu-link"><!-- Hamburger icon --><span></span></a>

	{% assign url = page.url | remove:'index.html' %}
	{% assign sorted_pages = site.pages | sort:"pageOrder" %}
	<nav id="menu">
		<div class="pure-menu pure-menu-open">
			<span class="pure-menu-heading">MockServer</span>
			<ul>
				<li><a href="/#what-is-mockserver">What is MockServer</a></li>
				<li><a href="/#why-use-mockserver">Why use MockServer</a></li>
			</ul>
		</div>
		<div class="pure-menu pure-menu-open">
			<!--			<span class="pure-menu-heading">MockServer</span>-->
			<ul>
				{% for page in sorted_pages %}
				{% if page.section == 'General' and page.subsection %}
				{% if page.shortTitle %}
				{% assign title = page.shortTitle %}
				{% else %}
				{% assign title = page.title %}
				{% endif %}
				<li typeof="sioc:Page" about="{{ page.url | prepend: site.baseurl }}" class="{% if url == page.url %}active{% endif %}">
					<a href="{{ page.url | prepend: site.baseurl }}" property="dc:title">{{ title }}</a>
				</li>
				{% endif %}
				{% endfor %}
				<li><a target="_blank" href="https://app.swaggerhub.com/apis/jamesdbloom/mock-server-openapi" target="_blank">REST API Reference</a></li><!-- <img src="/images/openapi.png" width="100px"/></a> -->
				<li><a target="_blank"href="https://github.com/mock-server/mockserver/tree/master/mockserver-examples" target="_blank">Example Code</a></li>
			</ul>
		</div>
		<div class="pure-menu pure-menu-open">
			<span class="pure-menu-heading">Mocking</span>
			<ul>
				{% for page in sorted_pages %}
					{% if page.section == 'Mock Server' and page.subsection %}
						{% if page.shortTitle %}
							{% assign title = page.shortTitle %}
						{% else %}
							{% assign title = page.title %}
						{% endif %}
				<li typeof="sioc:Page" about="{{ page.url | prepend: site.baseurl }}" class="{% if url == page.url %}active{% endif %}">
					<a href="{{ page.url | prepend: site.baseurl }}" property="dc:title">{{ title }}</a>
				</li>
					{% endif %}
				{% endfor %}
			</ul>
		</div>
		<div class="pure-menu pure-menu-open">
			<span class="pure-menu-heading">Proxying</span>
			<ul>
				{% for page in sorted_pages %}
					{% if page.section == 'Proxy' and page.subsection %}
						{% if page.shortTitle %}
							{% assign title = page.shortTitle %}
						{% else %}
							{% assign title = page.title %}
						{% endif %}
				<li typeof="sioc:Page" about="{{ page.url | prepend: site.baseurl }}" class="{% if url == page.url %}active{% endif %}">
					<a href="{{ page.url | prepend: site.baseurl }}" property="dc:title">{{ title }}</a>
				</li>
					{% endif %}
				{% endfor %}
			</ul>
		</div>
		<div class="pure-menu pure-menu-open">
			<span class="pure-menu-heading">Where</span>
			<ul>
				{% for page in sorted_pages %}
					{% if page.section == 'Where' and page.subsection %}
						{% if page.shortTitle %}
							{% assign title = page.shortTitle %}
						{% else %}
							{% assign title = page.title %}
						{% endif %}
				<li typeof="sioc:Page" about="{{ page.url | prepend: site.baseurl }}" class="{% if url == page.url %}active{% endif %}">
					<a href="{{ page.url | prepend: site.baseurl }}" property="dc:title">{{ title }}</a>
				</li>
					{% endif %}
				{% endfor %}
				<li><a target="_blank" href="https://app.swaggerhub.com/apis/jamesdbloom/mock-server-openapi" target="_blank">Swagger Hub</a></li><!-- <img src="/images/openapi.png" width="100px"/></a> -->
			</ul>
		</div>
		<!--<div class="pure-menu pure-menu-open">-->
			<!--<ul>-->
				<!--<li id="siteMapLink" class="pure-menu-heading"><a href="/sitemap.html">Site Map</a></li>-->
			<!--</ul>-->
		<!--</div>-->
	</nav>

</header>
